<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/iview.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<meta charset="utf-8">
		<title></title>
		<style>
			
			li{
				list-style: none;
				font-size: 12px;
			}
			
			.left_nav{
				position: absolute;
				left: 0px;
				top: 0px;
				width: 200px;
				height: 100%;
				background:url(img/bg.jpg);
			}
			.menu_left{
				margin-top: 20px;
				margin-left: 5px;
				padding-bottom: 100px;
				border-radius: 15px;
				padding-top: 20px;
			}
			
			.content{
				position: absolute;
				left: 210px;
				width: calc(100% - 205px);
				height: 100%;
				background:url(img/bg2.gif);
				
			}
			
			.roon_cen{
				
				position: absolute;
				margin: 15px;
				width: calc(100% - 30px);
				height:calc(100% - 30px);
				border-radius: 15px;
				padding: 10px;
				background: #e3e2e1;
				
				transition: opacity 1.5s;
			}
			
			.user_cen{
				position: absolute;
				margin: 15px;
				width: calc(100% - 30px);
				height:calc(100% - 30px);
				border-radius: 15px;
				padding: 10px;
				background: #e3e2e1;
				
				transition: opacity 1.5s;
			}
			
			
			.logout_cen{
				position: absolute;
				margin: 15px;
				width: calc(100% - 30px);
				height:calc(100% - 30px);
				border-radius: 15px;
				padding: 10px;
				background: #e3e2e1;
				transition: opacity 1.5s;
			}
			
			.room_search{
				float: right;
			}
			
			.room_content{
				border: 1px solid #60aac0;
				border-radius: 10px;
				margin:10px 0px;
				width: 100%;
				height: calc(100% - 50px);
				padding: 10px;
				overflow-y: scroll;
			}
			
			
			.room_one{
				float: left;
				color: white;
				margin-left: 20px;
				margin-bottom: 10px;
				cursor: pointer;
			}
			
			.green{
				background-color: #1aa034;
			}
			
			.red{
				background-color: #e22018;
			}
			
			.room_one_op{
				margin-top: 10px;
			}
			
			.room_one_status{
				font-size: 12px;
			}
			
			.room_one_title{
				font-weight: bolder;
			}
			
			.orderlist{
				height: 150px;
				overflow: hidden;
			}
			
			.bt_edit_room{
				position: absolute;
				right: 100px;
				top: 10px;
			}
			
			.bt_delete_room{
				position: absolute;
				right: 30px;
				top: 10px;
			}

			.hisone{
				margin: 5px;

			}
			.hisone span{
				display: inline-block;
				margin-left: 10px;
				text-align: center;
			}

			.hisone-name{
				width: 10%;
			}

			.hisone-start{
				width: 30%;
			}

			.hisone-end{
				width: 30%;
			}


            .avatar{
                position: absolute;
                width: 300px;
                height: 300px;
                border-radius: 150px;
                left: calc(50% - 180px);
                top:calc(50% - 300px);
            }

            .show-uname{
                position: absolute;
                width: 300px;
                font-size: 60px;
                left: calc(50% - 180px);
                top:calc(50% );
                overflow: hidden;
                text-align: center;
            }

            .user_operator{
                position: absolute;
                width: 300px;
                font-size: 60px;
                left: calc(50% - 180px);
                top:calc(60% );
                overflow: hidden;
                text-align: center;
            }
		</style>
	</head>
	<body>
		<div id="bg" class="bg">
			<Modal
				:visible.sync="isShowAddRoom"
				title="添加客房"
				:loading="loading"
				@on-ok="conAddRoom">
				<div class="myformone">
					<span class="mylable">房间号：</span><i-input :value.sync="addRoomNum" type="text" style="width: 150px;" placeholder="301"></i-input>
				</div>
				<div class="myformone">
					<span class="mylable">级别：</span><i-input :value.sync="addRoomLev" type="text" style="width: 150px;" placeholder="豪华"></i-input>
				</div>
				<div class="myformone">
					<span class="mylable">类型：</span><i-input :value.sync="addRoomType" type="text" style="width: 150px;" placeholder="双人"></i-input>
				</div>
				<div class="myformone">
					<span class="mylable">价格：</span><i-input :value.sync="addRoomMoney" type="text" style="width: 50px;" placeholder="50"></i-input>元/晚
				</div>
				<div class="myformone">
					{{addResult}}
				</div>
			</Modal>
			
			
			<Modal
				:visible.sync="isShowUpdateRoom"
				title="修改客房"
				:loading="loading"
				@on-ok="conUpdateRoom">
				<div class="myformone">
					<span class="mylable">房间号：</span> {{updateRoomNum}}
				</div>
				<div class="myformone">
					<span class="mylable">级别：</span><i-input :value.sync="updateRoomLev" type="text" style="width: 150px;" placeholder="豪华"></i-input>
				</div>
				<div class="myformone">
					<span class="mylable">类型：</span>

                    <i-input :value.sync="updateRoomType" type="text" style="width: 150px;" placeholder="双人"></i-input>
				</div>
				<div class="myformone">
					<span class="mylable">价格：</span><i-input :value.sync="updateRoomMoney" type="text" style="width: 50px;" placeholder="50"></i-input>元/晚
				</div>
			</Modal>
			
			<Modal
				:visible.sync="isShowOpenRoom"
				title="开房"
				:loading="loading"
				@on-ok="conOpenRoom">
				<div class="myformone">
					<span class="mylable">房间号：</span> {{openRoomNum}}
				</div>
				<div class="myformone">
					<span class="mylable">姓名：</span><i-input :value.sync="openRoomName" type="text" style="width: 150px;" placeholder="张三"></i-input>
				</div>
				<div class="myformone">
					<span class="mylable">身份证：</span><i-input :value.sync="openRoomIdcard" type="text" style="width: 150px;" placeholder="50022……22"></i-input>
				</div>
				
			</Modal>


			<Modal
				:visible.sync="isShowEditPW"
				title="修改密码"
				:loading="loading"
				@on-ok="conEditPW">

				<div class="myformone">
					<span class="mylable">旧密码：</span><i-input :value.sync="oldPW" type="password" style="width: 150px;" ></i-input>
				</div>
				<div class="myformone">
					<span class="mylable">新密码：</span><i-input :value.sync="newPW" type="password" style="width: 150px;"></i-input>
				</div>

				<div class="myformone">
					<span class="mylable">确认密码：</span><i-input :value.sync="enewPW" type="password" style="width: 150px;"></i-input>
				</div>

			</Modal>



            <Modal
                :visible.sync="isShowTip"
                title="提示"
                :loading="loading"
                @on-ok="conCloseTip">
                <div class="myformone">
                    {{tips}}
                </div>

            </Modal>
			
			<Modal
				:visible.sync="isShowRoomDetail"
				title="客房信息"
				@on-ok="">
				<i-button type="primary" class="bt_edit_room" @click="editRoom">编辑</i-button>
				<i-button class="bt_delete_room" @click="deleteRoom">删除</i-button>
				<div class="myformone">
					<span class="mylable">房间号：</span> {{roomDeatil.id}}
				</div>
				<div class="myformone">
					<span class="mylable">级别：</span>{{roomDeatil.level}}
				</div>
				<div class="myformone">
					<span class="mylable">类型：</span>{{roomDeatil.type}}
				</div>
				<div class="myformone">
					<span class="mylable">价格：</span>{{roomDeatil.price}}元/晚
				</div>
				<div class="myformone">
					<span class="mylable">状态：</span>{{roomDeatil.status==0?"空闲":"已入住"}}
				</div>
				<div class="myformone" >
					<div>历史入住信息：</div>
					<ul style="padding: 5px;" class="orderlist">
						<li class="hisone"><span class="hisone-name">姓名</span><span class="hisone-start">入住时间</span><span class="hisone-end">退房时间</span></li>
						<template v-for="item in roomDeatil.orders">
							<li class="hisone" >
								<span class="hisone-name">{{item.name}}</span><span class="hisone-start">{{item.starttime}}</span><span class="hisone-end">{{item.endtime}}</span>
							</li>
						</template>
						
					</ul>
				</div>
				
			</Modal>
			
			
			<div class="left_nav">
				<Menu theme="dark" :active-key.sync="key" class="menu_left" width="auto">
						<Menu-item key="1">
							<i class="fa fa-home" aria-hidden="true"></i>
							客房中心
						</Menu-item>
						<Menu-item key="2">
							<i class="fa fa-user" aria-hidden="true"></i>
							个人中心
						</Menu-item>
					
						<!--<Menu-item key="3">
							<i class="fa fa-power-off" aria-hidden="true"></i>
							注销
						</Menu-item>-->
					
				</Menu>
				
			</div>
			
			<div class="content">
				
				<div :style.sync="styles[0]" class="roon_cen">
					<div class="room_operator">
						<i-button type="primary" @click="showAddRoom">添加客房</i-button>
						<i-button type="primary" @click="conGetAllRoom">显示所有客房</i-button>
						<i-button type="primary" @click="conGetFreeRoom">显示未入住客房</i-button>
						<span class="room_search"> 
							<i-input :value.sync="roomNum" type="text" style="width: 150px;" placeholder="301"></i-input>
							<i-button type="primary" @click="conSearch(roomNum)">查找</i-button>
						</span>
						
					</div>
					
					<div class="room_content">
						<Card v-for="item in RoomList" @click="detailRoom(item.id)" class="room_one" :class="{'red':item.status==1,'green':item.status==0}" style="width:150px" shadow="true">
							<div class="room_one_title" slot="title">
								{{item.id}}号房间
							</div>
							<div class="room_one_status" slot="extra">
								{{item.status==0?"空闲":"已入住"}}
							</div>
							<ul>
								<li>级别：{{item.level}}</li>
								<li>类型：{{item.type}}</li>
								<li>价格：￥{{item.price}}/晚</li>
								
							</ul>
							<div class="room_one_op">
								<i-button type="info" :disabled="item.status==1" size="small" @click.stop="openRoom(item.id)">入住</i-button>
								<i-button type="info" :disabled="item.status==0" size="small" @click.stop="exitRoom(item.id)">退房</i-button>
							</div>
						</Card>
					</div>
				</div>
				
				<div :style.sync="styles[1]" class="user_cen">


                    <img src="img/avatar.png" class="avatar" />

                    <div class="show-uname">{{userName}}</div>


                    <div class="user_operator">
                        <i-button type="primary" @click="updatePW">修改密码</i-button>

                        <i-button type="primary" @click="exitUser">注销</i-button>




                    </div>
				</div>
				
				<!--<div :style.sync="styles[2]" class="logout_cen">
					<i-button type="primary" @click="exitUser">确定注销</i-button>
				</div>-->
				
			</div>
		</div>



		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iview.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/connect.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var vm = new Vue({
				el: "#bg",
				data: {
					key:'1',
					loading: true,
					roomNum:'',
					styles:[
						{
							opacity:'1',
							'z-index':'999'
						},
						{
							opacity:'0'
						},
						{
							opacity:'0'
						}
					],
					isShowAddRoom:false,
					addRoomNum:'',
					addRoomLev:'',
					addRoomType:'',
					addRoomMoney:'',
					addResult:'',
					
					isShowUpdateRoom:false,
					updateRoomNum:'',
					updateRoomLev:'',
					updateRoomType:'',
					updateRoomMoney:'',
					updateRoomStatus:'',
					
					RoomList:[],
					
					isShowRoomDetail:false,
					roomDeatil:'',
					
					isShowOpenRoom:false,
					
					openRoomNum:'',
					openRoomName:'',
					openRoomIdcard:'',
					exitRoomNum:'',
					userName:'22',

                    isShowTip:false,
                    tips:'',

					isShowEditPW:false,
					oldPW:'',
					newPW:'',
					enewPW:''


					
				},
				created: function () {
					this.conGetAllRoom();
					this.conGetUser();
				},
				computed: {

				},
				methods: {
					updatePW(){
						vm.isShowEditPW=true;
					},
					conEditPW(){

						if(vm.newPW == vm.enewPW){
							rPost(updatePWPath,
									{
										"oldPassword":vm.oldPW,
										"newPassword":vm.newPW
									},
									function(result){

										if(result.res){
											vm.isShowEditPW=false;
											vm.tips="修改成功";
											vm.isShowTip=true;
										}
										else{
											vm.isShowEditPW=false;
											vm.tips="修改失败";
											vm.isShowTip=true;
										}


									},
									function(){
										vm.isShowEditPW=false;
										vm.tips='修改失败';
										vm.isShowTip=true;


									});
						}
						else{
							console.log("舒服舒服");
							vm.isShowEditPW=false;
							vm.tips='两次输入不相同'
							vm.isShowTip=true;

						}

					},
                    conCloseTip(){
                        vm.isShowTip=false;
                    },
					exitUser(){
						rPost(exitPath,
							{	
							},
							function(result){

								window.location.href= "index.html";
								
								
							},
							function(){
								vm.isShowTip=true;
								vm.tip='注销失败'
								
							});
					},
					conGetUser(){
						rPost(getUserPath,
							{	
							},
							function(result){
								if(result!=null){
									vm.userName = result.username;
								}
								else
								    vm.userName='root';
								
							},
							function(){
                                vm.userName='root';
								
							});
					},
					conAddRoom() {
						rPost(addRoomPath,
							{	
								"id":this.addRoomNum,
								"level":this.addRoomLev,
								"type":this.addRoomType,
								"price":this.addRoomMoney,
								"status":0
							},
							function(result){
								//成功
								if(result.res){
									vm.isShowAddRoom = false;
									vm.conGetAllRoom();
								}
								else{
                                    vm.isShowAddRoom = false;
									vm.tips="添加失败！请检查信息是否正确！";
									vm.isShowTip = true;
								}

								vm.addRoomNum='',
								vm.addRoomLev='',
								vm.addRoomType='',
								vm.addRoomMoney=''

								
							},
                            function (XMLHttpRequest, textStatus, errorThrown)
                            {
                                vm.isShowAddRoom = false;
                                if(XMLHttpRequest.status==401)
                                    vm.tips="无权限";
                                else
                                    vm.tips="失败";
                                vm.isShowTip = true;

								vm.addRoomNum='',
								vm.addRoomLev='',
								vm.addRoomType='',
								vm.addRoomMoney=''
                            });
					},
					showAddRoom(){
						this.isShowAddRoom = true;
					},
					conGetAllRoom(){
						rPost(getAllRoomPath,
							{},
							function(result){
								//成功
								if(result.list!=null){
									vm.RoomList = result.list;
								}
								else{
								    vm.tips='获取房间信息失败';
								    vm.isShowTip=true;
                                }
								
							},
							function(){
                                window.location.href= "index.html";
							});
					},
					conGetFreeRoom(){
						rPost(getAllRoomPath,
							{"status":0},
							function(result){
								//成功
								if(result.list!=null){
									vm.RoomList = result.list;
								}
                                else{
                                    vm.tips='获取房间信息失败';
                                    vm.isShowTip=true;
                                }
								
							},
							function(){

								window.location.href= "index.html";
							});
					},
					openRoom(id){
						console.log("open"+id);
						this.openRoomNum = id;
						this.isShowOpenRoom = true;
					},
					exitRoom(id){
						console.log("exit"+id);
						rPost(exitRoomPath,
							{"id":id},
							function(result){
								//成功
								if(result.res){
									vm.conGetAllRoom();
									
								}
                                else{
                                    vm.tips='编辑失败!请检查信息格式！';
                                    vm.isShowTip=true;
                                }

								
							},
                            function (XMLHttpRequest, textStatus, errorThrown)
                            {

                                if(XMLHttpRequest.status==401)
                                    vm.tips="无权限";
                                else
                                    vm.tips="失败";
                                vm.isShowTip = true;
                            });
					},
					detailRoom(id){
						this.conGetRoomDetail(id);
					},
					conOpenRoom(){
						rPost(openRoomPath,
							{
								"id":vm.openRoomNum,
								"name":vm.openRoomName,
								"idcard":vm.openRoomIdcard
							},
							function(result){
								//成功
								if(result.res){
									vm.isShowOpenRoom = false;
									vm.conGetAllRoom();
								}
                                else{
                                    vm.isShowOpenRoom = false;
                                    vm.tips='入住失败，请检查信息格式！';
                                    vm.isShowTip=true;
                                }

								vm.openRoomNum='';
								vm.openRoomName='';
								vm.openRoomIdcard='';
							},
                            function (XMLHttpRequest, textStatus, errorThrown)
                            {
                                vm.isShowOpenRoom = false;
                                if(XMLHttpRequest.status==401)
                                    vm.tips="无权限";
                                else
                                    vm.tips="失败";
                                vm.isShowTip = true;

								vm.openRoomNum='';
								vm.openRoomName='';
								vm.openRoomIdcard='';
                            });
					},
					conSearch(id){
						rPost(getOneRoom,
							{"id":id},
							function(result){
								//成功
								if(result.room!=null){
									var arr = new Array();
									arr[0]=result.room;
									vm.RoomList = arr;
									
								}
								else{
								    vm.tips='没有找到房间';
								    vm.isShowTip=true;
                                }
								
							},
							function(){
                                vm.tips='请输入房间号';
                                vm.isShowTip=true;
							});
					},
					conGetRoomDetail(id){
						rPost(getRoomDetailPath,
							{"id":id},
							function(result){
								//成功
								if(result.detail!=null){
									vm.roomDeatil = result.detail;
									vm.isShowRoomDetail = true;
								}
                                else{
                                    vm.tips='没有找到房间';
                                    vm.isShowTip=true;
                                }
								
							},
                            function (XMLHttpRequest, textStatus, errorThrown)
                            {

                                if(XMLHttpRequest.status==401)
                                    vm.tips="无权限";
                                else
                                    vm.tips="获取失败";
                                vm.isShowTip = true;
                            });
					},
					deleteRoom(){
						rPost(deleteRoomPath,
							{
								"id":vm.roomDeatil.id
							},
							function(result){
								//成功
								if(result.res){
									
									vm.isShowRoomDetail = false;
									vm.conGetAllRoom();
								}
                                else{
                                    vm.isShowRoomDetail = false;
                                    vm.tips='删除失败';
                                    vm.isShowTip=true;
                                }
								
							},
                            function (XMLHttpRequest, textStatus, errorThrown)
                            {
                                vm.isShowRoomDetail = false;
                                if(XMLHttpRequest.status==401)
                                    vm.tips="无权限";
                                else
                                    vm.tips="获取失败";
                                vm.isShowTip = true;
                            });
					},
					editRoom(){
						this.updateRoomNum = this.roomDeatil.id;
						this.updateRoomLev = this.roomDeatil.level;
						this.updateRoomType = this.roomDeatil.type;
						this.updateRoomMoney = this.roomDeatil.price;
						this.updateRoomStatus = this.roomDeatil.status;
						this.isShowRoomDetail = false;
						this.isShowUpdateRoom = true;
					},
					conUpdateRoom(){
						rPost(updateRoomPath,
							{
								"id":vm.updateRoomNum,
								"level":vm.updateRoomLev,
								"type":vm.updateRoomType,
								"price":vm.updateRoomMoney,
								"status":vm.updateRoomStatus
							},
							function(result){
								//成功
								if(result.res){
									
									vm.isShowUpdateRoom = false;
									vm.conGetAllRoom();
								}
                                else{
                                    vm.isShowUpdateRoom = false;
                                    vm.tips='更新失败！请检查信息格式！';
                                    vm.isShowTip=true;
                                }
								
							},
                            function (XMLHttpRequest, textStatus, errorThrown)
                            {
                                vm.isShowUpdateRoom = false;
                                if(XMLHttpRequest.status==401)
                                    vm.tips="无权限";
                                else
                                    vm.tips="获取失败";
                                vm.isShowTip = true;
                            });
					}
				},
				watch:{
					key:function(newkey,oldkey){
						
						this.styles.splice(oldkey-1,1,{opacity:'0'});
						
						this.styles.splice(newkey-1,1,{opacity:'1','z-index':'999'});
						
						
					}
				}
			})
		</script>
	</body>
</html>
